<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <link rel="stylesheet" href="http://unpkg.com/element-ui@1.3.6/lib/theme-default/index.css" />
    </head>
    <body>
        <script src="http://unpkg.com/vue/dist/vue.js"></script>
        <script src="http://unpkg.com/element-ui@1.3.6/lib/index.js"></script>
        <div id="app">
            <el-form :model="ruleForm2" ref="ruleForm2" :rules="rules2" label-width="100px">
              <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-input v-model.number="ruleForm2.age"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
                <el-button @click="resetForm('ruleForm2')">重置</el-button>
              </el-form-item>
            </el-form>
        </div>
        <script>
          new Vue({
            el:'#app',
            data() {
              var checkAge=(rule,value,callback) => {
                if(!value){
                  return callback(new Error('密码不能为空！'));
                }
                setTimeout(() => {
                  console.log(value,Number.isInteger(value));
                  if(!Number.isInteger(value)){
                    callback(new Error('请输入数值！'))
                  }else{
                    if(value<18){
                      callback(new Error('必须年满18周岁！'))
                    }else{
                      callback()
                    }
                  }
                },1000);
              };
              var validatePass=(rule,value,callback) => {
                if(!value){
                  if(value === ''){
                    callback(new Error('请输入密码！'));
                  }else {
                    if(this.ruleForm2.checkPass !== ''){
                      this.$refs.ruleForm2.validateField('checkPass');
                    }
                    callback();
                  }
                }
              };
              var validatePass2=(rule,value,callback) => {
                if(value === ''){
                  callback(new Error('请输入密码！'));
                }else if(value !== this.ruleForm2.pass){
                  callback(new Error('两次输入的密码不一致'));
                }else{
                  callback();
                }
              }
              return {
                ruleForm2:{
                  pass:'',
                  checkPass:'',
                  age:''
                },
                rules2:{
                  pass:[
                    {
                      validator:validatePass,trigger:'blur'
                    }
                  ],
                  checkPass:[
                    {
                      validator:validatePass2,trigger:'blur'
                    }
                  ],
                  age:[
                    {
                      validator:checkAge,trigger:'blur'
                    }
                  ]
                }
              };
            },
            methods: {
              submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                  if(valid){
                    alert('submit');
                  }else{
                    console.log('error submit!');
                    return false;
                  }
                })
              },
              resetForm(formName) {
                this.$refs[formName].resetFields();
              }
            }
          });
        </script>
    </body>
</html>